<template>
  <div>
    <common-industry></common-industry>
    <ul class="dianpu_info">
      <li>
        <span class="hong">*</span><span class="jiacu">出租转让</span>
        <van-field name="status" :value="statusV" :rules="[{ required: true }]" placeholder="点击选择出租转让" readonly @click="postStatus()" class="iconfont icon-arrow-down xiala"/>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">行业</span>
        <div class="liang_field iconfont icon-arrow-down" @click="postFilter()">
          <van-field name="store_category" :value="storeCategoryV" :rules="[{ required: true }]" readonly placeholder="点击选择行业"  />
          <van-field name="categoryclass" :value="categoryclassV" readonly />
        </div>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">区域</span>
        <div class="liang_field iconfont icon-arrow-down" @click="postCity()">
          <van-field name="city" :value="cityV" readonly :rules="[{ required: true }]" placeholder="点击选择区域" />
          <van-field name="district" :value="districtV" :rules="[{ required: true }]" readonly />
        </div>
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">信息标题</span>
        <van-field
          v-model="storeTitle"
          name="store_title"
          placeholder="请输入标题"
          :rules="[{ required: true }]"
        />
      </li>
      <li>
        <span class="hong">*</span><span class="jiacu">详细地址</span>
        <van-field
          v-model="storeCity"
          name="store_city"
          placeholder="请输入地址"
          :rules="[{ required: true }]"
        />
      </li>
    </ul>
    <!-- 状态 -->
    <van-popup v-model="showStatus" position="bottom">
      <van-picker
          show-toolbar
          :columns="statusL"
          @confirm="onstatus"
          @cancel="showStatus = false"
      />
    </van-popup>
    <!-- 行业 -->
    <van-popup v-model="showstoreCategory" position="bottom">
      <van-picker
          show-toolbar
          :columns="CategoryL"
          @confirm="onstoreCategory"
          @cancel="showstoreCategory = false"
      />
    </van-popup>
    <!-- 区域 -->
    <van-popup v-model="showcity" position="bottom">
      <van-picker
          show-toolbar
          :columns="cityL"
          @confirm="onstoreCity"
          @cancel="showcity = false"
      />
    </van-popup>
  </div>
</template>

<script>
import CommonIndustry from '../../../common/industry'
export default {
  name: 'CompanyDianpuInfo',
  components: {
    CommonIndustry
  },
  props: {
    dataL: Object
  },
  data () {
    return {
      statusV: '',
      statusL: [],
      showStatus: false,
      storeCategoryV: '',
      categoryclassV: '',
      CategoryL: [{}],
      showstoreCategory: false,
      industry: [],
      cityV: '',
      districtV: '',
      cityL: [{}],
      showcity: false,
      cityQ: [],
      storeTitle: '',
      storeCity: ''
    }
  },
  watch: {
    'dataL': function (dataL) {
      this.statusV = this.dataL.status
      this.storeCategoryV = this.dataL.store_category
      this.categoryclassV = this.dataL.categoryclass
      this.cityV = this.dataL.store_quyu.split('/')[0]
      this.districtV = this.dataL.store_quyu.split('/')[1]
      this.storeTitle = this.dataL.store_title
      this.storeCity = this.dataL.store_city
    }
  },
  methods: {
    postStatus () {
      this.showStatus = true
      this.statusL = ['转让', '出租']
    },
    postFilter () {
      this.showstoreCategory = true
      if (this.CategoryL.length < 2) {
        this.industry = this.$store.state.industry
        for (var i = 0; i < this.industry.length; i++) {
          this.CategoryL[i] = {}
          this.$set(this.CategoryL[i], 'id', this.industry[i].region_id)
          this.$set(this.CategoryL[i], 'text', this.industry[i].name)
          this.$set(this.CategoryL[i], 'children', [])
          for (var k = 0; k < this.industry[i].children.length; k++) {
            this.CategoryL[i].children[k] = {}
            this.$set(this.CategoryL[i].children[k], 'id', this.industry[i].children[k].region_id)
            this.$set(this.CategoryL[i].children[k], 'text', this.industry[i].children[k].name)
          }
        }
      }
    },
    postCity () {
      this.showcity = true
      if (this.cityL.length < 2) {
        this.cityQ = this.$store.state.city
        for (var i = 0; i < this.cityQ.length; i++) {
          this.cityL[i] = {}
          this.$set(this.cityL[i], 'id', this.cityQ[i].id)
          this.$set(this.cityL[i], 'text', this.cityQ[i].name)
          this.$set(this.cityL[i], 'children', [])
          for (var k = 0; k < this.cityQ[i].children.length; k++) {
            this.cityL[i].children[k] = {}
            this.$set(this.cityL[i].children[k], 'id', this.cityQ[i].children[k].id)
            this.$set(this.cityL[i].children[k], 'text', this.cityQ[i].children[k].name)
          }
        }
      }
    },
    onstatus (value) {
      this.statusV = value
      this.showStatus = false
    },
    onstoreCategory (value) {
      this.storeCategoryV = value[0]
      this.categoryclassV = value[1]
      this.showstoreCategory = false
    },
    onstoreCity (value) {
      this.cityV = value[0]
      this.districtV = value[1]
      this.showcity = false
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.dianpu_info
  width 100%
  height auto
  box-shadow 0px 0px 5px 0px rgba(4, 0, 0, 0.1)
  border-radius .1rem /* 5/50 */
  padding 0 .3rem /* 15/50 */
  padding-bottom .5rem /* 25/50 */
  li
    width:100%
    font-size .26rem /* 13/50 */
    padding-top .5rem /* 25/50 */
    .hong
      font-size .22rem /* 11/50 */
      color #F6360A
    .van-field
      width 100%
      height 1rem /* 50/50 */
      line-height .8rem
      border 1px solid rgba(0,0,0,.1)
      border-radius .1rem /* 5/50 */
      position relative
      margin-top .3rem /* 15/50 */
      padding .1rem /* 5/50 */ .3rem /* 15/50 */
      /deep/ .van-picker__confirm
        color #333
    .van-field:after
      border-bottom:0
    .van-field.xiala
      background #f8f8f8
      border 0px
    .iconfont:before
      position absolute
      right .3rem /* 15/50 */
      z-index 999
    .liang_field
      width 100%
      background #f8f8f8
      border-radius .1rem /* 5/50 */
      display flex
      margin-top .3rem /* 15/50 */
      position relative
      .van-field
        border 0px
        background-color transparent
        margin-top 0px
    .liang_field.iconfont:before
      line-height 1rem
</style>
